<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <style>
        #fenye{
            float: left;
            width:850px;
            text-align: center;
            margin-top: 30px;
            margin-left: 270px;
        }
        .text{
            color:rgb(103,194,58);
            font-size: 15px;
        }
        .detail{
            margin-left: 120px;
        }
        .detailImg{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="app">
        <template>
            <el-table
                    :highlight-current-row="highlight"
                    :data="tableData"
                    style="width: 100%">
                <!--弹出层-->
                <el-table-column type="expand">
                    <template  slot-scope="props">
                        <el-table
                                class="detail"
                                :data="props.row.list"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="url"
                                    label="商品图片"
                                    width="180">
                                <template scope="scope">
                                <img class="detailImg" :src="scope.row.url" />
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="proId"
                                    label="商品id"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="proname"
                                    label="商品名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    width="180"
                                    prop="price"
                                    label="单价/元">
                            </el-table-column>
                            <el-table-column
                                    width="180"
                                    prop="number"
                                    label="数量">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>

                <el-table-column
                        label="订单id"
                        prop="proOrderId">
                </el-table-column>
                <el-table-column
                        label="总金额"
                        prop="total">
                </el-table-column>
                <el-table-column
                        label="用户id"
                        prop="userId">
                </el-table-column>
                <el-table-column
                        label="用户名"
                        prop="userName">
                </el-table-column>
                <el-table-column
                        label="收货人"
                        prop="name"
                >
                </el-table-column>
                <el-table-column
                        label="地址"
                        prop="address"
                >
                </el-table-column>
                <el-table-column
                        label="生成时间"
                        prop="time"
                >
                </el-table-column>
                <el-table-column
                        label="状态"
                        prop="statusName">
                </el-table-column>
                <el-table-column
                        label="电话"
                        prop="tel"
                >
                </el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-select v-model="status" >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                    <template slot-scope="scope">
                        <span class="text" v-if="scope.row.status==1">未付款</span>
                        <el-button
                                v-if="scope.row.status==2"
                                size="medium "
                                type="success"
                                @click="handleEdit(scope.$index, scope.row)">确定发货</el-button>
                        <span class="text" v-if="scope.row.status==3">待收货</span>
                        <span class="text" v-if="scope.row.status==4">交易完成</span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页-->
        <div id="fenye">
            <el-pagination
                    :background="background"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[2,3,4,5]"
                    :page-size="number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                tableData: [],
                search: '',
                pageIndex:1,
                number:3,
                count:0,
                //分页数字背景
                background:true,
                //高亮
                highlight:true,
                //状态
                status:0,
                //状态
                options: [{
                    value:0,
                    label:'全    部'
                },{
                    value: 1,
                    label: '未付款'
                }, {
                    value: 2,
                    label: '待发货'
                }, {
                    value: 3,
                    label: '待收货'
                },{
                    value:4,
                    label: '交易完成'
                }],

            },
            created(){
                this.getOrderList(0);
            },
            watch:{
                'status':function(){
                    this.pageIndex=1;
                    this.getOrderList(this.status);
                }
            },
            methods:{
                //获取分页信息
                getOrderList(status){
                    var _this=this;
                    $.ajax({
                        url:'/selectAllProductOrderFenYe',
                        type:'post',
                        data:{
                            pageIndex:this.pageIndex,
                            number:this.number,
                            status:status
                        },
                        dataType:'json',
                        success:function(data){
                            console.log(data);
                            _this.count=data.obj.count;
                            _this.tableData=data.list;
                            console.log(_this.tableData);
                            for(var i=0;i<_this.tableData.length;i++){
                                if(_this.tableData[i].status==1){
                                    _this.tableData[i]["statusName"]="暂未付款";
                                }else if(_this.tableData[i].status==2){
                                    _this.tableData[i]["statusName"]="未发货";
                                }else if(_this.tableData[i].status==3){
                                    _this.tableData[i]["statusName"]="待收货";
                                }else{
                                    _this.tableData[i]["statusName"]="交易完成";
                                }
                            }
                            console.log(_this.tableData);
                        }
                    })
                },
                //number变化触发
                handleSizeChange(val) {
                    this.number=val;
                    this.getOrderList(this.status);
                },
                //当前页改变触发
                handleCurrentChange(val) {
                    this.pageIndex=val;
                    this.getOrderList(this.status);
                },
                //确定收货
                handleEdit(index,row){
                    var _this=this;
                    this.$confirm('确认已发货?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            url:'/updateProductOrderStatusThree',
                            type:"post",
                            async:false,
                            data:{
                                proOrderId:row.proOrderId
                            }
                        })
                        this.$message({
                            type: 'success',
                            message: '发货成功!'
                        });
                        this.tableData[index].status=3;
                        this.tableData[index].statusName='待收货';
                        console.log(this.tableData);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消发货'
                        });
                    });
                    console.log(index,row);
                }

            }
        })
    </script>
</body>
</html>